<template>
  <div class="left-menu">
    <!--<el-menu :default-active="defaultActive" theme="#000" class="el-menu-vertical-demo" @select="handlerSelect">
      <el-menu-item index="1"><router-link to="/" class="icon1"></router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/evaluation" class="icon2"></router-link></el-menu-item>
      <el-menu-item index="3"><a @click="none()" class="icon3"></a></el-menu-item>
      <el-menu-item index="4"><a @click="none()" class="icon4"></a></el-menu-item>
      <el-menu-item index="5"><a @click="none()" class="icon5"></a></el-menu-item>
    </el-menu>-->
    <ul>
      <li @click="switchIndex(1)" :class="{'is-active': curIndex === 1}"><router-link to="/" class="icon1"></router-link></li>
      <li @click="switchIndex(2)" :class="{'is-active': curIndex === 2}"><router-link to="/evaluation" class="icon2"></router-link></li>
      <li @click="switchIndex(3)" :class="{'is-active': curIndex === 3}"><router-link to="/evaluationResult" class="icon3"></router-link></li>
      <li @click="none()" :class="{'is-active': curIndex === 4}"><a @click="none()" class="icon4"></a></li>
      <li @click="none()" :class="{'is-active': curIndex === 5}"><a @click="none()" class="icon5"></a></li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dispatch: this.$store.dispatch, // 用于vuex值得动态设置
        getter: this.$store.getters,
        curIndex: 1
      }
    },
    methods: {
      handlerSelect (key, keyPath) {
        // console.log(key, keyPath);
      },
      none () {
        this.$message('该功能暂未开放', 'warning')
      },
      switchIndex (index) {
        this.curIndex = index
      }
    },
    mounted () {
      var path = this.$route.path
      // console.log(path)
      if (path === '/home') {
        this.curIndex = 1
      } else if (path === '/evaluation') {
        this.curIndex = 2
      } else if (path === '/evaluationResult') {
        this.curIndex = 3
      }
    }
  }
</script>

<style lang="less">
  @import './leftMenu.less';
</style>
